<template>
  <div class="app-container">
    <div class="table-header">
      <h2>人员增补申请单列表</h2>
      <el-button type="primary" @click="$router.push('/zengbu/biao')">新增</el-button>
      <router-link to="/zengbumain" class="back-btn">
        <el-button type="primary">返回</el-button>
      </router-link>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="applicationDepartment" label="申请部门" width="150"></el-table-column>
      <el-table-column prop="applicationPosition" label="申请职位" width="150"></el-table-column>
      <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
      <el-table-column prop="employeeType" label="员工类别" width="120"></el-table-column>
      <el-table-column prop="fillDate" label="填单日期" width="120"></el-table-column>
      <el-table-column prop="demandDate" label="需求日期" width="120"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewDetail(scope.row.id)">详情</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import staffSupplementApi from '@/api/staffSupplement';

export default {
  name: 'BiaoList',
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      try {
        const response = await staffSupplementApi.getList({
          current: this.currentPage,
          size: this.pageSize
        });
        if (response.data) {
          this.tableData = response.records || [];
          this.total = response.total || 0;
        }
      } catch (error) {
        console.error('获取列表失败:', error);
        this.$message.error('获取列表失败：' + (error.response?.data || error.message));
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchList();
    },
    viewDetail(id) {
      this.$router.push({
        path: '/zengbu/biao',
        query: { id: id }
      });
    },
    async handleDelete(id) {
      try {
        await this.$confirm('确认删除该记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        const response = await staffSupplementApi.delete(id);
        this.$message.success('删除成功');
        this.fetchList();
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败:', error);
          this.$message.error('删除失败：' + (error.response?.data || error.message));
        }
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px 40px 20px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.table-header .el-button {
  margin-left: 10px;
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}

.back-btn {
  text-decoration: none;
}
</style> 